//node 的内置模块  path
const path = require('path');
//获取当前文件的 绝对路径

const HtmlWebpackPlugin = require('html-webpack-plugin')
    //引入 提取js中的css代码的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//将css文件及代码进行极致压缩s
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');




module.exports = {
    //入口 文件的相对路径
    entry: {
        commonCSS:"./src/js/commonCSS.js",
        // 插件
        flexible:"./src/lib/flexible.js",
        captcha: './src/lib/captcha/captcha-mini.js',
        http: './src/utils/http.js',
        tool: './src/utils/tool.js',
        swiper: "./src/lib/swiper/swiper-bundle.js",
        weui: "./src/lib/weui/weui.js",

        // 页面
        index: './src/js/index.js',
        login: './src/js/login.js',
        register: './src/js/register.js',
        advertisement: './src/js/advertisement.js',
        personalPage: './src/js/personalPage.js',
        sport: './src/js/sport.js',
        personalInfo: './src/js/personalInfo.js',
        course: './src/js/course.js',
        courseInfo: './src/js/courseInfo.js',
        map: './src/js/map.js',
        total: './src/js/total.js'
    },
    //出口
    output: {
        path: path.resolve(__dirname, 'dist'), //存到哪里----绝对路径
        filename: 'js/[name].js', //自己重新取一个文件名
        publicPath: './'
    },
    //你的哪个模块 需要 什么 loader 作为解释
    // css-loader style-loader
    module: {
        rules: [ //规则
            {
                test: /\.css$/, //匹配所有的以 .css结尾的文件
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    }, 'css-loader']
                    // 使用这两个loader 解释器 对该文件的代码进行解释
                    // css-loader： 让webpack 可以认识 css代码
                    // style-loader ： 将打包完成之后的css代码 以 style标签的形式 插入到页面中
            },
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|mp4)$/, //配置css中的图片打包
                loader: 'url-loader', //只有一个处理的loader的写法  
                //可以通过url-loader 将图片压缩为 base64编码格式的图片
                //大图就不压缩  小图可以压缩
                options: {
                    name: '[hash:16].[ext]', // 图片输出的名字hash长度16位 默认32位
                    limit: 30 * 1024, // 限制 小于30kb base64处理
                    esModule: false, //关闭 Es6 模块 只能使用commonJS规范
                    outputPath: 'img',
                }
            },
            { test: /\.html$/, loader: 'html-loader' },
            //fonts打包
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'fonts' //输出的目录
                }
            },
        ]
    },
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/login.html', //需要打包的html文件---相对路径
            filename: 'login.html', //打包之后的文件名
            chunks: ['login','commonCSS','flexible','http','tool'] //这个页面需要的js 模块    
        }),
        new HtmlWebpackPlugin({
            template: './src/register.html', //需要打包的html文件---相对路径
            filename: 'register.html', //打包之后的文件名
            chunks: ['register','commonCSS','flexible','captcha','http','tool'] //这个页面需要的js 模块    
        }),
        new HtmlWebpackPlugin({
            template: './src/advertisement.html', //需要打包的html文件---相对路径
            filename: 'advertisement.html', //打包之后的文件名
            chunks: ['advertisement','commonCSS','flexible'] //这个页面需要的js 模块    
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html', //需要打包的html文件---相对路径
            filename: 'index.html', //打包之后的文件名
            chunks: ['index','commonCSS','flexible','swiper','http','tool'] //这个页面需要的js 模块    
        }),
        new HtmlWebpackPlugin({
            template: './src/personalPage.html', //需要打包的html文件---相对路径
            filename: 'personalPage.html', //打包之后的文件名
            chunks: ['personalPage','commonCSS','flexible','http','tool'] //这个页面需要的js 模块    
        }),
        new HtmlWebpackPlugin({
            template: './src/sport.html', //需要打包的html文件---相对路径
            filename: 'sport.html', //打包之后的文件名
            chunks: ['sport','commonCSS','flexible','tool','http'] //这个页面需要的js 模块    
        }),
        new HtmlWebpackPlugin({
            template: './src/personalInfo.html', //需要打包的html文件---相对路径
            filename: 'personalInfo.html', //打包之后的文件名
            chunks: ['personalInfo','commonCSS','flexible','http','weui','tool'] //这个页面需要的js 模块    
        }),
        new HtmlWebpackPlugin({
            template: './src/course.html', //需要打包的html文件---相对路径
            filename: 'course.html', //打包之后的文件名
            chunks: ['course','commonCSS','flexible','tool'] //这个页面需要的js 模块    
        }),
        new HtmlWebpackPlugin({
            template: './src/courseInfo.html', //需要打包的html文件---相对路径
            filename: 'courseInfo.html', //打包之后的文件名
            chunks: ['courseInfo','commonCSS','flexible','tool','http'] //这个页面需要的js 模块    
        }),
        new HtmlWebpackPlugin({
            template: './src/map.html', //需要打包的html文件---相对路径
            filename: 'map.html', //打包之后的文件名
            chunks: ['map','commonCSS','flexible'] //这个页面需要的js 模块    
        }),
        new HtmlWebpackPlugin({
            template: './src/total.html', //需要打包的html文件---相对路径
            filename: 'total.html', //打包之后的文件名
            chunks: ['total','commonCSS','flexible'] //这个页面需要的js 模块    
        }),

        new MiniCssExtractPlugin({
            filename: 'css/[name].css' // 输出到css文件夹里
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ],
    //环境  development:开发环境  production：生产环境（线上环境）
    mode: 'development',
    //开发服务的配置
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 8080, // 端口  8080 80  8081 8082
        open: true, // 自动打开服务
        publicPath: '/', // 静态资源查找路径
        openPage: 'index.html', // 打开的页面
    },
    target: 'web', // 目标是浏览器
}